<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <!-- 传统请求 -->
    <a href="/user">user</a>
    <!-- 
        AJAX:Asynchronous JavaScript And XML
            Asynchronous:异步执行结构
            JavaScript:ajax技术的主要实现代码，通过定义js代码完成和服务器请求交互
            XML:以对标签形式定义的文本结构，使用其描述数据关系，ajax技术出现时候还没有json格式语法 
   -->

   <input type="button" value="加载user" onclick="loadUser()">
   <p id="myuser"></p>
   <script>
        function loadUser(){
            //客户端使用js提供的XMLHttpRequest构造函数，向服务器发送请求
            // console.log(XMLHttpRequest);

            // 基于XMLHttpRequest构造函数，创建专门的异步请求对象
            let xhr=new XMLHttpRequest();
           
            // XMLHttpRequest.prototype.open(method,url)
            // 可以为一个已经创建的异步请求对象完成请求地址、请求类型、请求模式的初步操作
            // method:http请求的类型:get、post...
            // url：请求地址
            xhr.open("get","/user");

            // XMLHttpRequest.prototype.send()实现异步ajax请求的发送操作
            xhr.send();

          

            // xhr.responseText返回响应的文本数据,从而完成数据的加载和渲染操作
            // responseText的获取必须在ajax异步请求(请求时间+服务器执行时间+响应时间)完成后，才能获取，如果请求未完成就调用，会返回空字符串
            // setTimeout(function(){
            //     //因为时间不定，计时器的定义并不能准确描述请求完成
            //     console.log(xhr.responseText);
            // },3000);
            
            // 可以在当前ajax请求完成后自动调用方法回调
            xhr.onload=function(){
                console.log(xhr.responseText);
                let myuser=document.getElementById("myuser");
                myuser.innerHTML=xhr.responseText;
            };
            

        }
   </script>
</body>
</html>